<template>
    <div>
        <div class="content">
            <el-button type="primary" size="mini" @click="handleButton('start')">发起</el-button>
            <el-button size="mini" @click="handleButton('close')">关闭</el-button>
            <el-button size="mini" @click="handleButton('delete')">删除</el-button>
            <el-button size="mini" @click="handleButton('primary-search')">高级查询</el-button>
            <el-button size="mini" @click="handleButton('loadout')">导出</el-button>
            <el-button size="mini" @click="handleButton('doLayout')"> 布局设置</el-button>
            <el-button size="mini" @click="handleButton('refresh')"> 刷新</el-button>
        </div>
        <div class="noOpened">
            <RiskTableP
                :ref="'risk-table-' + type"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :column="showColumns"
                :paging="paging"
                v-loading="tableLoading"
                @page-change="getTableData"
                @checkRowKeys-change="checkRowKeysChangeEmit"
                :key="tableKey"
                :cell-style="cellStyle"
            >
                <template #prohibitionDate="{ row }">
                    <el-tag size="mini" :class="handleTagStyle(row.prohibitionDate)" v-if="row.prohibitionDate !== undefined">{{
                        row.prohibitionDate
                    }}</el-tag>
                    <span v-else> -- </span>
                </template>
                <template #insideDays="{ row }">
                    <el-tag style="background-color: #02a7f0; color: #fff; width: 35px;text-align:center" size="mini">{{
                        row.insideDays || 0
                    }}</el-tag>
                </template>
                <!-- <template #detail="{ row }">
                    <a href="javascript:;" @click="handleFeedback(row, 'look')">详情</a>
                </template> -->
                <template #operation="{ row }">
                    <a href="javascript:;" @click="handleBtnLook(row)">查看</a>
                    <a href="javascript:;" @click="handleFeedback(row, 'look')">调整方案</a>
                </template>
            </RiskTableP>
        </div>
        <!-- 页面布局换成plus -->
        <RiskTableLayout
            ref="risk-table-layout"
            :tableName="layoutTableName"
            :visible.sync="layoutDialog"
            :column="tableColumns"
            :fixedColumns="fixedColumns"
        />

        <TransfinitePrimarySearch
            type="strict"
            :searchParam="searchParam"
            :visible="primarySearchVisible"
            @handleButton="handleButton($event.type, $event.params)"
        ></TransfinitePrimarySearch>

        <!-- 详情 -->
        <EventFeedback v-if="visible" :visible.sync="visible" type="look" :overrunDetail="currentOverrun" />

        <!-- 关闭弹框 -->
        <yh-dialog title="超限指标关闭" :visible.sync="closeVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="600px" drag>
            <h3>关闭原因：</h3>
            <el-input type="textarea" :rows="6" v-model="closeReason" size="mini"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeVisible = false"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="handleButton('close-confirm')"> 确 定 </el-button>
            </div>
        </yh-dialog>
        <!-- 静态报告详情 -->
        <StaticDetail v-if="staticVisible" :visible.sync="staticVisible" :resultId="resultId" :history="history" />
    </div>
</template>
<script lang="ts">
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { TransfiniteIndicator } from '../../class/transfinite-Indicator';
import API from '../../api/manual-processing';
import { ColumnVO, TableConfigVO, VueObject } from '@/common/vo';
import TransfinitePrimarySearch from '../transfinite-Indicator/transfinite-primary-search.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { TransfiniteIndicatorDetailDTO } from '../../vo/transfinite-Indicator';
import EventFeedback from '../../disposal-center/event-feedback.vue';
import Dict from '../../dict/index';
import StaticDetail from '../../../components/static-detail.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'StrictCheck',
    components: { RiskTableLayout, RiskTableP, TransfinitePrimarySearch, RiskIconButton, EventFeedback, StaticDetail },
})
export default class StrictCheck extends TransfiniteIndicator {
    @Prop() activeValue: string;
    type: string = 'strict-check';
    tableData: any = [];

    tableColumns: ColumnVO[] = this.columnUtil.strictCheckTableColumns;

    tableConfig: TableConfigVO = {
        rowKey: 'overrunEventId',
    };
    Dict = new Dict();

    fixedColumns: any[] = [
        { title: '事件编号', field: 'overrunEventId', width: '80px', fixed: 'left' },
        {
            title: '事件状态',
            field: 'eventStatus',
            minWidth: '100px',
            render: value => Dict.eventStatusPojo[value],
            fixed: 'left',
        }, // 0-未发起1-调整中2-已关闭
        {
            title: '反馈情况',
            field: 'feedbackStatus',
            minWidth: '100px',
            render: value => Dict.feedbackStatusPojo[value],
            fixed: 'left',
        }, // 0-待反馈1-已反馈
        {
            title: '超限事件分布',
            field: 'adjustProgerss',
            minWidth: '120px',
            render: (value, record) => record.adjustProgerssName?.join(',') || '--',
            fixed: 'left',
        },
        { field: 'operation', fixed: 'right', title: '操作', align: 'center', width: '80px' },
    ];

    layoutTableName: string = 'TN_STRICT_CHECK';

    requestTableMethodName: any = API.strictDetailCheckList;
    loadOutRequestName: any = API.downLoadFileStrictCheck;

    primarySearchVisible: boolean = false;

    currentOverrun: any = {}; // 当前行
    visible: boolean = false; // 详情弹框

    searchParam: TransfiniteIndicatorDetailDTO = {
        eventStatusList: [],
        triggerType: [],
        adjustProgerss: [],
        fundCode: [],
        investmentManager: [],
        approveDate: '',
        tradeDate: '',
        entryCode: '',
        entryName: '',
        prohibitionDateUnit: '',
        prohibitionDate: '',
        feedbackStatus: '',
        sponsor: '',
    };

    resultId: any = '';
    history: any = '';
    staticVisible: boolean = false;

    @Watch('activeValue', { immediate: true })
    async handleActiveValue() {
        if (this.activeValue === 'strict-check' && this.$attrs.echartParams['isClick']) {
            if (this.isFirst) {
                this.getTableData();
                this.isFirst = false;
            }
        }
    }

    // @Prop() echartParams: any;
    @Watch('$attrs.echartParams', { deep: true })
    async handleEchartParams() {
        const echartParams: any = this.$attrs.echartParams;
        console.log(echartParams, 'echartParams');
        if (this.activeValue === 'strict-check' && !echartParams.isClick) {
            const keys = Object.keys(this.searchParam);
            for (let key of keys) {
                this.searchParam[key] = echartParams.params[key] || '';
            }
            this.getTableData();
        }
    }

    mounted() {
        // 监听布局设置
        super.watchShowColumns();
    }

    getTableData() {
        return super.getTableData();
    }

    /**
     * 操作行
     */
    async handleButton(type: string, data: any) {
        if (type == 'primary-search') {
            this.primarySearchVisible = true;
        } else if (type == 'primary-search-confirm') {
            this.primarySearchVisible = false;
            this.searchParam = JSON.parse(JSON.stringify(data));
            this.paging.currentPage = 1;
            await super.getTableData();
        } else if (type == 'primary-search-cancel') {
            this.primarySearchVisible = false;
            // 点击取消或者X掉时恢复默认值
        } else {
            super.handleButtonEmit(type);
        }
    }

    checkRowKeysChangeEmit(keys) {
        super.checkRowKeysChangeEmit(keys);
    }

    // 查看行
    handleBtnRow(row: any) {}

    /**
     * 详情查看
     */
    handleFeedback(row: any, type: string): void {
        this.currentOverrun = row;
        this.visible = true;
    }

    handleBtnLook(obj: any): void {
        this.resultId = obj.resultId;
        this.history = obj.eventStatus === '2';
        this.staticVisible = true;
        // TODO
        // const msg = {
        //     type: 'static-detail',
        //     path: `/lookStaticDetail?resultId=${obj.resultId}&history=${obj.eventStatus === 'history'}`,
        //     title: `静态报告详情-${obj.resultId}`,
        // };
        // top.window.postMessage(msg, '*');
        // this.$emit('handelOperate', { record: obj, history: this.type === 'history', clickRecord: obj });
    }

    // 超限事件分布 单元格样式
    cellStyle($event) {
        return super.cellStyle($event);
    }
}
</script>
<style lang="scss" scoped>
.content {
    padding: 5px 2px;
    border: 1px solid #f2f2f2;
    margin-bottom: 10px;
}
.noOpened /deep/ .vxe-table {
    .vxe-table--body-wrapper.body--wrapper {
        height: calc(100vh - 270px) !important;
    }
}
a {
    color: #578bec;
    padding: 0 5px;
}
.tag1,
.tag2,
.tag3 {
    color: #fff;
    width: 35px;
    text-align: center;
}
.tag1 {
    background-color: #e9d571;
    border-color: #e9d571;
}
.tag2 {
    background-color: #e98730;
    border-color: #e98730;
}
.tag3 {
    background-color: red;
    border-color: red;
}
</style>
